<template>
    <view>
        <wlk-sticky  id="end" @returnParams="handleEndReturnParams"  :scrollTop="scrollTop" :offsetTop="offsetTop" :borderHeight="borderHeight" :enable="item.params.tabMode=='fixed'?true:false">
            <view class="tabs bgw"><u-tabs :list="item.data.endCity" lineWidth="28" :activeStyle="{
                       color: themeColor,
                       fontSize: '28rpx',
                       padding:'0 9rpx',
                       fontWeight: 'bold',
                       transform: 'scale(1.05)'
                   }" :inactiveStyle="{
                       color: '#646566',
                       fontSize: '28rpx',
                       padding:'0 9rpx',
                       transform: 'scale(1)'
                   }" lineHeight="2" :current="current" :lineColor="themeColor" @click="click"></u-tabs>
            </view>
        </wlk-sticky>

        <view class="line-box" :style="[lineBoxStyle]">
            <view class="pt10">
                <view class="relative wlkflex bgw br04 mb20 overHidden" :style="[lineStyle]" @click="jump('/pages/line/detail?id='+line.id)"  v-if="item.params.mode=='one'" v-for="(line,index) in item.data.lines[current]" :key="index">
                    <view class="one-img">
                        <image class="wd100 hg100" :src="line.images[0]" lazy-load  mode="aspectFill"/>
                    </view>
                    <view class="one-info wlkflex align-content-between wrap">
                        <view class="wd100">
                            <view class="u-line-2 title">{{line.title}}</view>
                            <view class="u-line-1 desc">{{line.desc}}</view>
                            <view class="wlkflex tags">
                                <view class="tags-item" v-for="(tag,i) in line.tagids" v-if="i<2">
                                    <u-tag :text="tag.name" plain size="mini" :color="themeColor" :borderColor="themeColor" ></u-tag>
                                </view>
                            </view>
                        </view>
                        <view class="wd100 price-info wlkflex justify-between">
                            <view v-if="line.minprice>0">
                                <span>￥</span>
                                <span class="price">{{line.minprice}}</span>
                                <span class="ml05">起</span>
                            </view>
                            <view v-else>
                                <span class="col9">暂无库存</span>
                            </view>
                            <view class="sales">
                                {{line.sales}}人出游
                            </view>
                        </view>
                    </view>
                    <view class="line-start">
                        {{line.startcity[line.startcity.length-1].name}}出发
                    </view>
                </view>
                <view class="wlkflex justify-between wrap" v-if="item.params.mode=='two' && item.params.styleMode != 'waterfall'">
                    <view class="wd50 two-box wlkflex" v-for="(line,index) in item.data.lines[current]" :key="index">
                        <view  class="two-item bgw br04 mb10 overHidden" :style="[lineStyle]" @click="jump('/pages/line/detail?id='+line.id)">
                            <view class="two-img relative">
                                <image class="wd100 hg100 block" lazy-load :src="line.images[0]"  mode="aspectFill"/>
                                <view class="line-start">
                                    {{line.startcity[line.startcity.length-1].name}}出发
                                </view>
                            </view>
                            <view class="two-info wlkflex align-content-between wrap">
                                <view class="wd100">
                                    <view class="u-line-2 title">{{line.title}}</view>
                                    <view class="u-line-1 desc">{{line.desc}}</view>
                                    <view class="wlkflex tags">
                                        <view class="tags-item" v-for="(tag,i) in line.tagids" v-if="i<2">
                                            <u-tag :text="tag.name" plain size="mini" :color="themeColor" :borderColor="themeColor" ></u-tag>
                                        </view>
                                    </view>
                                </view>
                                <view class="wd100 price-info">
                                    <block v-if="line.minprice>0">
                                        <span>￥</span>
                                        <span class="price">{{line.minprice}}</span>
                                        <span class="ml05">起</span>
                                    </block>
                                    <block v-else>
                                        <span class="col9">暂无库存</span>
                                    </block>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="waterfall" v-else-if="item.params.mode=='two' && item.params.styleMode=='waterfall'">
                    <helang-waterfall-list
                            :status="waterfall.status"
                            :list="waterfall.list"
                            :reset="waterfall.reset"
                            type="line"
                            @click="clickFn"
                            @done="doneWaterFall"
                            ref="waterfall"
                    >
                    </helang-waterfall-list>
                </view>
                <view class="big-flex" v-if="item.params.mode=='big'">
                    <view class="wd100 big-box wlkflex" v-for="(line,index) in item.data.lines[current]" :key="index">
                        <view  class="wd100 big-item bgw br04  overHidden" :style="[lineStyle]" @click="jump('/pages/line/detail?id='+line.id)">
                            <view class="big-img relative">
                                <image class="wd100 hg100 block" lazy-load :src="line.images[0]"  mode="aspectFill"/>
                                <view class="line-start">
                                    {{line.startcity[line.startcity.length-1].name}}出发
                                </view>
                            </view>
                            <view class="big-info wlkflex align-content-between wrap">
                                <view class="wd100">
                                    <view class="u-line-2 title">{{line.title}}</view>
                                    <view class="u-line-1 desc">{{line.desc}}</view>
                                    <view class="wlkflex tags">
                                        <view class="tags-item" v-for="(tag,i) in line.tagids" v-if="i<4">
                                            <u-tag :text="tag.name" plain size="mini" :color="themeColor" :borderColor="themeColor" ></u-tag>
                                        </view>
                                    </view>
                                </view>
                                <view class="wd100 price-info wlkflex justify-between">
                                    <view v-if="line.minprice>0">
                                        <span>￥</span>
                                        <span class="price">{{line.minprice}}</span>
                                        <span class="ml05">起</span>
                                    </view>
                                    <view v-else>
                                        <span class="col9">暂无库存</span>
                                    </view>
                                    <view class="sales">
                                        {{line.sales}}人出游
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="slide-flex" v-if="item.params.mode=='slide'">
                    <u-scroll-list :indicator="false">
                        <view class="slide-box bgw br04" :style="[lineStyle]" v-for="(line,index) in item.data.lines[current]" :key="index" @click="jump('/pages/line/detail?id='+line.id)">
                            <view class="slide-img relative overHidden">
                                <image class="block" lazy-load :src="line.images[0]"  mode="aspectFill"/>
                                <view class="line-start">
                                    {{line.startcity[line.startcity.length-1].name}}出发
                                </view>
                            </view>
                            <view class="slide-info wlkflex align-content-between wrap">
                                <view class="wd100">
                                    <view class="u-line-2 title">{{line.title}}</view>
                                </view>
                                <view class="wd100 price-info">
                                    <block v-if="line.minprice>0">
                                        <span>￥</span>
                                        <span class="price">{{line.minprice}}</span>
                                        <span class="ml05">起</span>
                                    </block>
                                    <block v-else>
                                        <span class="col9">暂无库存</span>
                                    </block>
                                </view>
                            </view>
                        </view>
                    </u-scroll-list>
                </view>
            </view>
        </view>
    </view>

</template>

<script>
    import { toUrl,pxToRpx } from '@/wlkutils/tools';
    import helangWaterfallList from '../wlk-waterfall/waterfall-list';
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		name:"wlk-end",
		data() {
			return {
                // 瀑布流组件相关
                waterfall:{
                    status:"",
                    reset:false,
                    list:[]
                },
                lineBoxStyle:{},
                lineStyle:{},
                current:0,
                offsetTop:0,
                isFixed:false,
                fixedTop:0
			};
		},
        computed: {
            ...mapGetters(['themeColor'])
        },
        components: {
            helangWaterfallList
        },
        //属性
        props: {
            item: {
                type: Object,
                default: ()=> {
                    return []
                }
            },
            scrollTop:{
                type:Number,
                default:0,
                required: true,
            },
            systemInfo: {
                type: Object,
                default: ()=> {
                    return {}
                }
            },
            borderHeight:{
                type:Number,
                default:0,
            },
        },
        watch: {
        },
        created:function(e){
            this.offsetTop =pxToRpx( this.systemInfo.statusBarHeight + 44 );
            this.setLineStyle();
        },
        mounted:function(){
            this.waterfall.list = this.item.data.lines[this.current];
            this.waterfall.status = 'success';
        },
        methods: {
            doneWaterFall(height){
                this.waterfall.reset = false;
                if(height>0){
                    this.$emit('doneWaterFall',height)
                }
            },
            clickFn(data, index, tag) {
                this.jump('/pages/line/detail?id='+data.id)
            },
            click(item){
               this.current = item.index;
               this.scrollToMiddle();
                this.waterfall.reset = true;
                this.waterfall.status = 'loading';
                this.waterfall.list = [];
                setTimeout(() => {
                    if(this.item.data.lines[this.current].length>0){
                        this.waterfall.list = this.item.data.lines[this.current];
                        this.waterfall.status = 'success';
                    }else{
                        this.waterfall.status = 'empty';
                    }
                },10)
            },
            scrollToMiddle() {
                var that = this;
                if(this.isFixed){
                    uni.pageScrollTo({
                        scrollTop: that.fixedTop, //滚动的距离
                        duration: 0, //过渡时间
                    })
                }
            },
            setLineStyle(){
                this.lineBoxStyle.backgroundColor = this.item.style.bgColor;
                this.lineBoxStyle.padding = '0 '+uni.$u.addUnit(this.item.style.pageMargin/2, 'rpx');
                if(this.item.params.styleMode=='card'){
                    this.lineStyle.boxShadow = '0 2px 4px rgba(0,0,0,.06)';
                }
            },
            handleEndReturnParams(isFixed,fixedTop){
                this.isFixed = isFixed;
                this.fixedTop = fixedTop;
            },
            jump(path){
                toUrl(path);
            }
        }
	}
</script>

<style lang="scss">
    .tabs{
        border-bottom: 1px solid #f3f3f3;
    }
    .line-box{
        .one-img{
            image{
                width: 308rpx;
                height: 308rpx;
                display: block;
            }
        }
        .one-info{
            height: 270rpx;
            width: 400rpx;
            padding: 0 20rpx;
            pointer-events: none;
            .title{
                font-weight: bold;
                font-size: $font-lt;
            }
            .desc{
                font-size: $font-sm;
                color: $-color-muted;
                margin-top: 4rpx;
            }
            .tags{
                margin-top: 10rpx;
                .tags-item{
                    margin-right: 10rpx;
                }
            }
            .price-info{
                color: #f4710e;
                font-size: $font-base;
                .price{
                    font-size: $font-max;
                }
                .sales{
                    font-size: $font-sm;
                    color: $-color-muted;
                }
            }
        }
        .line-start{
            position: absolute;
            left: 0;
            top: 0;
            font-size: $font-sm;
            background-color: rgba(0,0,0,0.18);
            border-radius:4px 0 4px 0;
            padding: 6rpx 10rpx;
            color: #FFFFFF;
        }
        .two-box{
            height: 552rpx;
            .two-item{
                width: 95%;
                height: 96.5%;
                overflow: hidden;
                margin: 0 auto;
                .two-img{
                    height: 48%;
                }
                .two-info{
                    height: 52%;
                    padding: 20rpx 20rpx 20rpx 20rpx;
                    pointer-events: none;
                    .title{
                        font-weight: bold;
                        font-size: $font-lt;
                    }
                    .desc{
                        font-size: $font-sm;
                        color: $-color-muted;
                        margin-top: 4rpx;
                    }
                    .tags{
                        margin-top: 10rpx;
                        .tags-item{
                            margin-right: 10rpx;
                        }
                    }
                    .price-info{
                        color: #f4710e;
                        font-size: $font-base;
                        .price{
                            font-size: $font-max;
                        }
                    }
                }
            }
        }
        .big-flex{
            .big-box{
                height: 771rpx;
                .big-item{
                    height: 97%;
                    .big-img{
                        height: 65%;
                    }
                    .big-info{
                        height: 35%;
                        padding: 20rpx 20rpx 10rpx 20rpx;
                        pointer-events: none;
                        .title{
                            font-weight: bold;
                            font-size: $font-lt;
                        }
                        .desc{
                            font-size: $font-sm;
                            color: $-color-muted;
                            margin-top: 4rpx;
                        }
                        .tags{
                            margin-top: 10rpx;
                            .tags-item{
                                margin-right: 10rpx;
                            }
                        }
                        .price-info{
                            color: #f4710e;
                            font-size: $font-base;
                            .price{
                                font-size: $font-max;
                            }
                            .sales{
                                font-size: $font-sm;
                                color: $-color-muted;
                            }
                        }
                    }
                }
            }
        }
        .slide-flex{
            .slide-box{
                height: 455rpx;
                margin-right: 20rpx;
                .slide-img{
                    width: 263rpx;
                    height: 65%;
                    border-radius: 4px 4px 0 0;
                    image{
                        height: 100%;
                        width: 263rpx;
                    }
                }
                .slide-info{
                    width: 263rpx;
                    height: 35%;
                    padding: 10rpx 20rpx 10rpx 20rpx;
                    pointer-events: none;
                    .title{
                        font-weight: bold;
                        font-size: $font-lt;
                    }
                    .price-info{
                        color: #f4710e;
                        font-size: $font-base;
                        .price{
                            font-size: $font-lg;
                        }
                    }
                }
            }
        }

    }
</style>